<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="box">你好</div>
  <script>
    // 箭头函数
    var say = function (a, b) {
      console.log(a + b);
      return a + b
    }
    var say = (a, b) => {
      console.log(a + b);
      return a + b
    }
    // 一个参数  后面一句代码或一个返回值的省略方式
    // a => alert(1)  //一句代码
    // a=>a++   //return 值
    // function (a) {
    //   return a++
    // }

    // var obj = {
    //   run: function () { },
    //   run: () => { }
    // }
    // setTimeout(() => { }, 3000)
    // box.onclick = function () { }
    // box.onclick = () => { }
    // a => {
    // console.log(111)
    // console.log(3)
    //  }  //一个参数  多句代码块

    // 多个参数 
    // (a, b) => { }
    /**
* 箭头函数 和 普通函数的区别是什么？
*  1、this指向
*      箭头函数 this 指向定义时所在的对象。 不变的
*          箭头函数没有 this /this 是父级的this指向
*      普通函数 this 指向调用时所在的对象。 可变的
*  2、箭头函数不绑定arguments，取而代之用rest参数...解决
*      可以使用 rest 参数 ...参数
*  3、箭头函数是匿名函数，不能作为构造函数，不能使用new
*      不能new
*  4、箭头函数不能当做Generator函数,不能使用yield关键字
*/
    // (...rest) => {

    //   // arguments //不能使用arguments
    // }
    var box = document.getElementById("box");
    box.onclick = function () {
      var that = this;
      // setTimeout(function () {
      //   that.style.background = "red"
      // }, 2000)
      setTimeout(() => {
        // 箭头函数没有自己的this指向  继承父级的this指向
        this.style.background = "blue";
      }, 2000)
    }


  </script>
</body>

</html>